<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<title></title>
		<style type="text/css">
			*{
					margin: 0;
					padding: 0;
			}
			html,body{
					width: 100%;
					height: 100%;
			}
			body{
					perspective: 1000px;
					transform-style: preserve-3d;
			}
			.wrap{
					width: 100%;
					height: 100%;
			}
			.open{
					width: 100%;
					height: 100%;
			}
			.num1{
					width: 100%;
					height: 100%;
					background-image: url(img/bg.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					position: relative;
					display: none;
			}
			.logo1{
					position: absolute;
					top: 5%;
					left: 8%;
					width: 17%;
					-webkit-animation: "flash" 1s linear 1s;
			}
			.logo2{
					width: 24%;
					position: absolute;
					top: 7%;
					left: 28%;
					-webkit-animation: "flash" 1s linear 1s;
			}
			.logo1 img{
					width: 100%;
			}
			.logo2 img{
					width: 100%;
			}
			.title1{
					position: absolute;
					top: 53%;
					left: 113%;
					width: 92%;	
			}
			.title2{
					position: absolute;
					top: 32%;
					left: -134%;
					width: 60%;
			}
			.title3{
					position: absolute;
					top: 140%;
					left: 20%;
					width: 70%;
			}
			.title1 img{
					width: 100%;	
			}
			.title2 img{
					width: 100%;
			}
			.title3 img{
					width: 100%;
			}
			.challenge{
					position: absolute;
					top: 70%;
					left: -125%;
					width: 90%;
			}
			.challenge img{
					width: 100%;
			}
			.rule{
					position: absolute;
					top: 83%;
					left: 38%;
					width: 25%;
					-webkit-animation: "name" 1s linear forwards;
			}
			@keyframes name {
				from {
					-webkit-transform: translateZ(-1000px);
				}
				to {
					-webkit-transform: translateZ(0px);
				}
			}
			.rule img{
					width: 100%;
			}
			.rule2{
					position: absolute;
					top: 28%;
					left: 13%;
					width: 74%;
			}
			.rule2 img{
					width: 100%;
			}
			.close{
					position: absolute;
					top: 25%;
					left: 79%;
					width: 12%;
			}
			.close img{
					width: 100%;
			}
			.dhl{
					width: 100%;
					height: 100%;
					background-color: rgba(0,0,0,0.6);
					position: absolute;
					display: none;
			}
			
			.num2{
					width: 100%;
					height: 100%;
					background-image: url(img/background2.png);		
					background-size: 100% 100%;
					background-repeat: no-repeat;
					position: relative;	
					display: none;
			}
			.wel{
					width: 90%;
					position: absolute;
					top: 40%;
					left: 5%;
			}
			.start{
					width: 90%;
					position: absolute;
					top: 51%;
					left: 5%;
			}
			.wanfa{
					width: 90%;
					position: absolute;
					top: 61%;
					left: 5%;
			}
			.wel img{
					width: 100%;
			}
			.start img{
					width: 100%;
			}
			.wanfa img{
					width: 100%;
			}
			/*.num3{
					width: 100%;
					height: 100%;
					background-image: url(img/track.png);		
					background-size: 100%;
					background-repeat: no-repeat;
					position: relative;	
					display: none;
			}
			.car{
					width: 10%;
					position: absolute;
					top: 0;
					left: 0;
			}
			.car img{
					width: 100%;
			}*/
		</style>
	</head>
	<body>
		 <div class="wrap">
		 		<div class="open">
		 			<div class="num1">
		 						<div class="logo1"><img src="img/logo1.png"/></div>
		 						<div class="logo2"><img src="img/logo2.png"/></div>
		 						<div class="title1"><img src="img/1.png"/></div>
		 						<div class="title2"><img src="img/title2.png"/></div>
		 						<div class="title3"><img src="img/title3.png"/></div>
		 						<div class="challenge"><img src="img/challenge.png"/></div>
		 						<div class="rule"><img src="img/rule.png"/></div>
		 					<div class="dhl">
		 						<div class="rule2"><img src="img/rule2.png"/></div>
		 						<div class="close"><img src="img/close.png"/></div>
		 					</div>
		 			</div>
		 			
		 			<div class="num2">
		 					<div class="wel"><img src="img/welcome.png"/></div>
		 					<div class="start"><img src="img/start.png"/></div>
		 					<div class="wanfa"><img src="img/wanfa.png"/></div>
		 			</div>
		 			
		 			<!--<div class="num3">
		 					<div class="car"><img src="img/car.png"/></div>
		 					<div class="lb"><img src="img/leftbutton.png"/></div>
		 					<div class="rb"><img src="img/rightbutton.png"/></div>
		 					<div class="acc"><img src="img/accelerator.png"/></div>
		 			</div>-->
		 			<canvas id="canvas" width="500" height="500"></canvas>
		 			
		 		</div>
		 </div>
		 <script src="js/loading.js" type="text/javascript" charset="utf-8"></script>
		 <script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		 	function move(){
		 		$(".title1").animate({
					left:'4%',
    					top:'13%',
				},1500);
				$(".title2").animate({
					left:'34%',
    					top:'32%',
				},1500);
				$(".title3").animate({
					left:'20%',
    					top:'40%',
				},1500);
				$(".challenge").animate({
					left:'5%',
    					top:'70%',
				},1500);				
		 	}
		 	move();
		 	$(document).ready(function() {
				$(".rule").click(function() {
					$(".dhl").css({
						display: "block"
					});
				});
				
				$(".close").click(function() {
					$(".dhl").css({
						display: "none"
					});
				});
				
				$(".challenge").click(function() {
					$(".num1").css({
						display: "none"
					});
					$(".num2").css({
						display: "block"
					});
				});
				
				$(".start").click(function() {
					$(".num1").css({
						display: "none"
					});
					$(".num2").css({
						display: "none"
					});
					$(".num3").css({
						display: "block"
					});
				});
			});
		 
		 	var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext('2d');
			var SCREEN_WIDTH = document.documentElement.clientWidth;
			var SCREEN_HEIGHT = document.documentElement.clientHeight;
			canvas.width = SCREEN_WIDTH;
			canvas.height = SCREEN_HEIGHT;
			ctx.drawImage(obj.background_2, 0, scrollY, SCREEN_WIDTH, SCREEN_HEIGHT);
			ctx.drawImage(obj.background_2, 0, -SCREEN_HEIGHT + scrollY, SCREEN_WIDTH, SCREEN_HEIGHT)
		 	loading({
					background: "img/track.png",
					
				}, {
					complete: main
				})
		 	function draw() {
		 		ctx.beginPath(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
		 		scrollY++;
					if(scrollY >= SCREEN_HEIGHT) {
						scrollY = 0;
					}
		 		ctx.drawImage(obj.background, 0, scrollY, SCREEN_WIDTH, SCREEN_HEIGHT);
				ctx.drawImage(obj.background, 0, -SCREEN_HEIGHT + scrollY, SCREEN_WIDTH, SCREEN_HEIGHT)
		 	}
			draw()
		 
		 
		 
		 
		 
		 
		 
		 
		 </script>
	</body>
</html>
